<template>
  <div class="divBox">
    <pages-header
      ref="pageHeader"
      :title="$route.params.id ? '编辑文章' : '添加文章'"
      backUrl="/content/articleManager"
    ></pages-header>
    <el-card class="box-card mt14">
      <div class="components-container">
        <el-form ref="pram" label-width="90px" :model="pram">
          <el-form-item
            label="标题："
            prop="title"
            :rules="[{ required: true, message: '请填写标题', trigger: ['blur', 'change'] }]"
          >
            <el-input v-model="pram.title" class="selWidth" placeholder="标题" maxlength="100" />
          </el-form-item>
          <el-form-item
            label="作者："
            prop="author"
            :rules="[{ required: true, message: '请填作者', trigger: ['blur', 'change'] }]"
          >
            <el-input class="selWidth" v-model="pram.author" placeholder="作者" maxlength="20" />
          </el-form-item>
          <el-form-item
            label="文章分类："
            :rules="[{ required: true, message: '请选择分类', trigger: ['blur', 'change'] }]"
          >
            <el-select class="selWidth" v-model="pram.cid" placeholder="请选择">
              <el-option v-for="item in categoryTreeData" :key="item.id" :label="item.name" :value="item.id">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item
            label="图文封面："
            prop="imageInput"
            :rules="[{ required: true, message: '请上传图文封面', trigger: 'change' }]"
          >
            <div class="upLoadPicBox" @click="modalPicTap('1')">
              <div v-if="pram.imageInput" class="pictrue"><img :src="pram.imageInput" /></div>
              <div v-else class="upLoad">
                <i class="el-icon-camera cameraIconfont" />
              </div>
            </div>
          </el-form-item>
          <el-form-item
            label="文章简介："
            prop="synopsis"
            :rules="[{ required: true, message: '请填写文章简介', trigger: ['blur', 'change'] }]"
          >
            <el-input
              v-model="pram.synopsis"
              maxlength="100"
              type="textarea"
              :rows="2"
              resize="none"
              placeholder="文章简介"
              class="selWidth"
            />
          </el-form-item>
          <el-form-item
            label="文章内容："
            prop="content"
            :rules="[{ required: true, message: '请填写文章内容', trigger: ['blur', 'change'] }]"
          >
            <Tinymce v-model="pram.content"></Tinymce>
          </el-form-item>
          <el-form-item label="是否Banner：">
            <el-switch v-model="pram.isBanner" />
          </el-form-item>
          <el-form-item label="是否热门：">
            <el-switch v-model="pram.isHot" />
          </el-form-item>
          <el-form-item>
            <el-button
              type="primary"
              :loading="loading"
              @click="handerSubmit('pram')"
              v-hasPermi="['admin:article:update']"
              >保存</el-button
            >
          </el-form-item>
        </el-form>
      </div>
    </el-card>
  </div>
</template>

<script>
import Tinymce from '@/components/Tinymce/index';
import * as categoryApi from '@/api/categoryApi.js';
import * as articleApi from '@/api/article.js';
import * as selfUtil from '@/utils/ZBKJIutil.js';
import { fileImageApi } from '@/api/systemSetting';
import { getToken } from '@/utils/auth';
import { Debounce } from '@/utils/validate';
export default {
  // name: "edit",
  components: { Tinymce },
  data() {
    return {
      loading: false,
      constants: this.$constants,
      categoryTreeData: [],
      categoryProps: {
        value: 'id',
        label: 'name',
        children: 'child',
        expandTrigger: 'hover',
        checkStrictly: true,
        emitPath: false,
      },
      pram: {
        author: null,
        cid: null,
        content: '', //<span>My Document\'s Title</span>
        imageInput: '',
        isBanner: false,
        isHot: null,
        shareSynopsis: null,
        shareTitle: null,
        sort: 0,
        synopsis: null,
        title: null,
        url: null,
        id: null,
        // mediaId: null
      },
      editData: {},
      myHeaders: { 'X-Token': getToken() },
      editorContentLaebl: '',
      // basicForm:{editorContent:""}
    };
  },
  created() {
    this.tempRoute = Object.assign({}, this.$route);
  },
  mounted() {
    if (this.$route.params.id) {
      this.getInfo();
      this.setTagsViewTitle();
    }
    this.handlerGetCategoryTreeData();
  },
  methods: {
    getInfo() {
      categoryApi.articleInfoApi({ id: this.$route.params.id }).then((data) => {
        this.editData = data;
        this.hadlerInitEditData();
      });
    },
    modalPicTap(tit) {
      const _this = this;
      this.$modalUpload(
        function (img) {
          _this.pram.imageInput = img[0].sattDir;
        },
        tit,
        'content',
      );
    },
    hadlerInitEditData() {
      if (!this.$route.params.id) return;
      const {
        author,
        cid,
        content,
        imageInput,
        isBanner,
        isHot,
        shareSynopsis,
        shareTitle,
        sort,
        synopsis,
        title,
        url,
        id,
      } = this.editData;
      this.pram.author = author;
      this.pram.cid = Number.parseInt(cid);
      this.pram.content = content;
      this.pram.imageInput = imageInput;
      this.pram.isBanner = isBanner;
      this.pram.isHot = isHot;
      this.pram.shareSynopsis = shareSynopsis;
      this.pram.shareTitle = shareTitle;
      this.pram.sort = sort;
      this.pram.synopsis = synopsis;
      this.pram.title = title;
      this.pram.url = url;
      this.pram.id = id;
      // this.pram.mediaId = mediaId
    },
    handlerGetCategoryTreeData() {
      categoryApi.listCategroy({ type: 3, status: '' }).then((data) => {
        this.categoryTreeData = data;
        localStorage.setItem('adminArticleClassify', JSON.stringify(data));
      });
    },
    handerSubmit: Debounce(function (form) {
      this.$refs[form].validate((valid) => {
        if (!valid) return;
        if (!this.$route.params.id) {
          this.handlerSave();
        } else {
          this.handlerUpdate();
        }
      });
    }),
    handlerUpdate() {
      this.loading = true;
      this.pram.cid = Array.isArray(this.pram.cid) ? this.pram.cid[0] : this.pram.cid;
      this.pram.shareTitle = this.pram.title;
      this.pram.shareSynopsis = this.pram.synopsis;
      articleApi
        .UpdateArticle(this.pram)
        .then((data) => {
          this.$message.success('编辑文章成功');
          this.loading = false;
          this.$router.push({ path: '/content/articleManager' });
        })
        .catch(() => {
          this.loading = false;
        });
    },
    handlerSave() {
      this.loading = true;
      this.pram.cid = Array.isArray(this.pram.cid) ? this.pram.cid[0] : this.pram.cid;
      this.pram.shareTitle = this.pram.title;
      this.pram.shareSynopsis = this.pram.synopsis;
      articleApi
        .AddArticle(this.pram)
        .then((data) => {
          this.$message.success('新增文章成功');
          this.loading = false;
          this.$router.push({ path: '/content/articleManager' });
        })
        .catch(() => {
          this.loading = false;
        });
    },
    setTagsViewTitle() {
      const title = '编辑文章';
      const route = Object.assign({}, this.tempRoute, { title: `${title}-${this.$route.params.id}` });
      this.$store.dispatch('tagsView/updateVisitedView', route);
    },
  },
};
</script>

<style scoped>
.selWidth {
  width: 460px !important;
}
</style>
